<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" />
    <meta name="Keywords" content="MineData">
    <meta name="Description" content="MineData">
    <meta name="robots" content="none">
    <meta name="renderer" content="webkit">
    <meta name="viewport" content="maximum-scale=1.0" />
    <link href="./img/common/favicon.ico" rel="shortcut icon" type="image/x-icon" />
    <title>交通气象大数据服务平台</title>
    <link rel="stylesheet" href="//minedata.cn/minemapapi/v1.3/minemap.css">
</head>

<body>
    <div class="page-container scroll-styled2">
        <div id="map">
            <div class="map-title-box">
                <center>
                    <div class="map-title">
                        <span>交通气象大数据服务平台</span>
                    </div>
                </center>
            </div>
            <div class="weather-switch-not-selected" id="box-control">
                <span class="weather-switch-corner weather-switch-corner-1"></span>
                <span class="weather-switch-corner weather-switch-corner-2"></span>
                <span class="weather-switch-corner weather-switch-corner-3"></span>
                <span class="weather-switch-corner weather-switch-corner-4"></span>
                <span id="box-control-button-text">隐藏窗口</span>
            </div>
            <div class="weather-switch-not-selected" id="sign-in">
                <span class="weather-switch-corner weather-switch-corner-1"></span>
                <span class="weather-switch-corner weather-switch-corner-2"></span>
                <span class="weather-switch-corner weather-switch-corner-3"></span>
                <span class="weather-switch-corner weather-switch-corner-4"></span>
                <span>登录</span>
            </div>
            <div class="weather-switch-not-selected" id="sign-up">
                <span class="weather-switch-corner weather-switch-corner-1"></span>
                <span class="weather-switch-corner weather-switch-corner-2"></span>
                <span class="weather-switch-corner weather-switch-corner-3"></span>
                <span class="weather-switch-corner weather-switch-corner-4"></span>
                <span>注册</span>
            </div>
            <div id="user-info">
                <span class="user-info-icon"></span>
                <span>admin</span>
            </div>
            <div class="octagon-bg-box octagon-bg-box-left"></div>
            <div class="octagon-bg-box octagon-bg-box-right"></div>
            <div class="octagon-box" id="incident-info">
                <img src="./img/corner1.png" class="octagon-box-corner1">
                <img src="./img/corner2.png" class="octagon-box-corner2">
                <img src="./img/corner3.png" class="octagon-box-corner3">
                <img src="./img/corner4.png" class="octagon-box-corner4">
                <div class="octagon-box-border-top octagon-box-border"></div>
                <div class="octagon-box-border-bottom octagon-box-border"></div>
                <div class="octagon-box-title">
                    <span>交通事件统计</span>
                </div>
                <div id="incident-chart"></div>
            </div>
            <div class="octagon-box" id="congestion-info">
                <img src="./img/corner1.png" class="octagon-box-corner1">
                <img src="./img/corner2.png" class="octagon-box-corner2">
                <img src="./img/corner3.png" class="octagon-box-corner3">
                <img src="./img/corner4.png" class="octagon-box-corner4">
                <div class="octagon-box-border-top octagon-box-border"></div>
                <div class="octagon-box-border-bottom octagon-box-border"></div>
                <div class="octagon-box-title">
                    <span>道路拥堵指数TOP 10</span>
                </div>
                <div id="congestion-chart"></div>
            </div>
            <div class="octagon-box" id="weather-info">
                <img src="./img/corner1.png" class="octagon-box-corner1">
                <img src="./img/corner2.png" class="octagon-box-corner2">
                <img src="./img/corner3.png" class="octagon-box-corner3">
                <img src="./img/corner4.png" class="octagon-box-corner4">
                <div class="octagon-box-border-top octagon-box-border"></div>
                <div class="octagon-box-border-bottom octagon-box-border"></div>
                <div class="octagon-box-title">
                    <span>天气预报</span>
                </div>
                <div id="weather-chart"></div>
            </div>
            <div class="octagon-box" id="road-weather-info">
                <img src="./img/corner1.png" class="octagon-box-corner1">
                <img src="./img/corner2.png" class="octagon-box-corner2">
                <img src="./img/corner3.png" class="octagon-box-corner3">
                <img src="./img/corner4.png" class="octagon-box-corner4">
                <div class="octagon-box-border-top octagon-box-border"></div>
                <div class="octagon-box-border-bottom octagon-box-border"></div>
                <div class="octagon-box-title">
                    <span>道路天气TOP 10</span>
                </div>
                <div id="road-weather-chart"></div>
            </div>
            <div class="weather-switch">
                <div class="weather-switch-selected" id="road-condition-button">
                    <span class="weather-switch-corner weather-switch-corner-1"></span>
                    <span class="weather-switch-corner weather-switch-corner-2"></span>
                    <span class="weather-switch-corner weather-switch-corner-3"></span>
                    <span class="weather-switch-corner weather-switch-corner-4"></span>
                    <span>路况</span>
                </div>
                <div class="weather-switch-selected" id="incident-button">
                    <span class="weather-switch-corner weather-switch-corner-1"></span>
                    <span class="weather-switch-corner weather-switch-corner-2"></span>
                    <span class="weather-switch-corner weather-switch-corner-3"></span>
                    <span class="weather-switch-corner weather-switch-corner-4"></span>
                    <span>事件</span>
                </div>
                <div class="weather-switch-not-selected" id="tem-button">
                    <span class="weather-switch-corner weather-switch-corner-1"></span>
                    <span class="weather-switch-corner weather-switch-corner-2"></span>
                    <span class="weather-switch-corner weather-switch-corner-3"></span>
                    <span class="weather-switch-corner weather-switch-corner-4"></span>
                    <span>温度</span>
                </div>
                <div class="weather-switch-not-selected" id="wins-button">
                    <span class="weather-switch-corner weather-switch-corner-1"></span>
                    <span class="weather-switch-corner weather-switch-corner-2"></span>
                    <span class="weather-switch-corner weather-switch-corner-3"></span>
                    <span class="weather-switch-corner weather-switch-corner-4"></span>
                    <span>风力</span>
                </div>
                <div class="weather-switch-not-selected" id="rh-button">
                    <span class="weather-switch-corner weather-switch-corner-1"></span>
                    <span class="weather-switch-corner weather-switch-corner-2"></span>
                    <span class="weather-switch-corner weather-switch-corner-3"></span>
                    <span class="weather-switch-corner weather-switch-corner-4"></span>
                    <span>能见度</span>
                </div>
                <div class="weather-switch-not-selected" id="pre-button">
                    <span class="weather-switch-corner weather-switch-corner-1"></span>
                    <span class="weather-switch-corner weather-switch-corner-2"></span>
                    <span class="weather-switch-corner weather-switch-corner-3"></span>
                    <span class="weather-switch-corner weather-switch-corner-4"></span>
                    <span>降水量</span>
                </div>
                <div class="weather-switch-not-selected" id="od-button">
                    <span class="weather-switch-corner weather-switch-corner-1"></span>
                    <span class="weather-switch-corner weather-switch-corner-2"></span>
                    <span class="weather-switch-corner weather-switch-corner-3"></span>
                    <span class="weather-switch-corner weather-switch-corner-4"></span>
                    <span>人流分析</span>
                </div>
            </div>
            <div id="timeline-box"></div>
            <div id="legend"></div>
            <div id="loading">
                <img src="./img/gears.gif" alt="Loading">
            </div>
            <div id="sign-in-mask">
                <section class="login-form-wrap">
                    <form class="login-form" action="POST" action="#">
                        <label>
                            <input type="username" name="email" id="form-email" required placeholder="账号" value="admin">
                        </label>
                        <label>
                            <input type="password" name="password" id="form-password" required placeholder="密码" value="admin">
                        </label>
                        <button id="sign-in-submit">登录</button>
                        <button id="sign-up-submit">注册</button>
                    </form>
                    <button id="sign-in-close-button">X</button>
                </section>
            </div>
        </div>
    </div>
    <script src="//minedata.cn/minemapapi/demo/js/echarts-all-3.js"></script>
    <script src="./minemap.js?v=0dd36039"></script>
    <script src="//minedata.cn/minemapapi/v1.3/plugins/template/template.js"></script>
    <script src="//minedata.cn/minemapapi/v1.3/plugins/wind/velocity.js?v=0dd36039"></script>
</body>

</html>